<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Custom Basemap - 4.1</title>
<style>
html,body,#viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

#basemapToggleDiv {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 50;
}
</style>
<link href="http://192.168.20.118:8080/arcgisapi/4.1/esri/css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
/* dojoConfig = { 
        paths: {
          extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras",
          dgrid:"http://192.168.20.118:8080/arcgisapi/4.1/dgrid",
          dijit:"http://192.168.20.118:8080/arcgisapi/4.1/dijit",
          dojo : "http://192.168.20.118:8080/arcgisapi/4.1/dojo",
          dojox : "http://192.168.20.118:8080/arcgisapi/4.1/dojox",
          dstore : "http://192.168.20.118:8080/arcgisapi/4.1/dstore",
          esri : "http://192.168.20.118:8080/arcgisapi/4.1/esri",
          moment :  "http://192.168.20.118:8080/arcgisapi/4.1/moment"
        }
      }; */
</script>
<script src="http://192.168.20.118:8080/arcgisapi/4.1/init.js"></script>
<script>
require([
      "esri/config",
      "esri/layers/WebTileLayer",
      "esri/Map",
      "esri/Basemap",
      "esri/widgets/BasemapToggle",
      "esri/views/SceneView",
      "dojo/domReady!"
    ], function(esriConfig, WebTileLayer, Map,
      Basemap, BasemapToggle, SceneView
    ) {

      esriConfig.request.corsEnabledServers.push("a.tile.stamen.com",
        "b.tile.stamen.com", "c.tile.stamen.com", "d.tile.stamen.com");

      // Create a WebTileLayer with a third-party cached service
      var mapBaseLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tile.stamen.com/terrain/{level}/{col}/{row}.png",
        subDomains: ["a", "b", "c", "d"],
        copyright: "Map tiles by <a href=\"http://stamen.com/\">Stamen Design</a>, " +
          "under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. " +
          "Data by <a href=\"http://openstreetmap.org/\">OpenStreetMap</a>, " +
          "under <a href=\"http://creativecommons.org/licenses/by-sa/3.0\">CC BY SA</a>."
      });

      // Create a Basemap with the WebTileLayer. The thumbnailUrl will be used for
      // the image in the BasemapToggle widget.
      var stamen = new Basemap({
        baseLayers: [mapBaseLayer],
        title: "Terrain",
        id: "terrain",
        thumbnailUrl: "http://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
      });

      var map = new Map({
        basemap: "satellite",
        ground: "world-elevation"
      });

      var initCamera = {
        heading: 124.7,
        tilt: 82.9,
        position: {
          latitude: 40.713906,
          longitude: -111.848111,
          z: 1990
        }
      };

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: initCamera,
        // The secondary (Stamen) basemap only covers the contiguous USA.
        // Set constraints to make the user unlikely to go to unsupported locations
        constraints: {
          altitude: {
            max: 500000
          }
        }
      });

      // Add a basemap toggle widget to toggle to the custom basemap
      var toggle = new BasemapToggle({
        titleVisible: true,
        view: view,
        nextBasemap: stamen
      }, "basemapToggleDiv");
      toggle.startup();
    });</script>
</head>
<body>
	<div id="viewDiv">
		<div id="basemapToggleDiv"></div>
	</div>
</body>
</html>